<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Download Phoenix Code</title>
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>
        <img id="starsLeft"  src="../images/stars-left.svg"/>
        <div id="mainDiv">
            <img id="logo"  src="../images/phoenix-logo.svg"/>
            <div id="MainText">
                <h1>Download Phoenix Code</h1>
                <span>Phoenix Code is a text editor designed to make coding as intuitive and fun as playing a video game - specially crafted for web developers, designers, and students.</span>
                <br><br>
                <div style="display: flex; justify-content: center; align-items: center;">
                    <a href="https://phcode.io" style="cursor:pointer;">
                        <img src="../images/microsoft-windows-logo-svg.svg" width="50px" style="margin-right: 20px"/>
                        <img src="../images/MacOS_logo.svg" width="50px" style="margin-right: 10px"/>
                        <img src="../images/linux.svg" width="60px"/>
                    </a>
                </div>
                <br>
                <a href="https://phcode.io" style="cursor:pointer;">
                    <button id="load-status-display-btn" class="primary-button">
                        Download from phcode.io
                    </button>
                </a>
            </div>
        </div>
        <img id="cloudLeftTop"  src="../images/vector-top-left.png"/>
        <img id="cloudBottomRight"  src="../images/vector-bottom-right.png"/>
        <img id="starsRight"  src="../images/stars-right.svg"/>
        <img class="clouds" style="z-index: 3; transform: translate(0px, -1.55909px);" src="../images/cloud1.svg"/>
        <img class="clouds" style="z-index: 6; transform: translate(0px, -2.33863px);" src="../images/cloud2.svg"/>
        <img class="clouds" style="z-index: 5; transform: translate(0px, -3.89772px);" src="../images/cloud3.svg"/>
        <img class="clouds" style="z-index: 6; transform: translate(0px, -3.89772px);" src="../images/cloud4.svg"/>
        <div class="night">
            <div class="shooting_star">
                <div class="shooting_star"/>
            </div>
        </div>
        <div class="night">
            <div class="shooting_star">
                <div class="shooting_star"/>
            </div>
        </div>
        <div class="night">
            <div class="shooting_star">
                <div class="shooting_star"/>
            </div>
        </div>
    </body>
</html>
